<template>
  <v-main app>
    <v-text-field ref="inputCity" class="ma-12" label="请输入要查询的城市"
                  v-model="searchText"></v-text-field>

    <v-list dense class="mx-10">
      <v-list-item
        v-for="city in showCities"
        :key="city.id"
        style="border-bottom: 1px solid black"
        @click="handleClickCityName(city.name)"
      >
        <v-list-item-content>
          <v-list-item-title v-text="city.name"></v-list-item-title>
        </v-list-item-content>
      </v-list-item>
      <v-divider></v-divider>
    </v-list>
    <v-pagination v-model="page" :length="pageNum" circle></v-pagination>
    <back-to-top></back-to-top>
  </v-main>
</template>

<script>
  import BackToTop from "./BackToTop";
  import cities from "../assets/json/city";

  export default {
    name: "Search",
    components: {BackToTop},
    data() {
      return {
        page: 1,
        showCities: [],
        searchText: "",
        tmp: [],
        searchRes: []
      };
    },
    methods: {
      handleClickCityName: function (name) {
        if (name === "还没有找到您要查找的城市") {
          return;
        }
        this.$store.commit("changeCity", name);
        this.$router.replace("/");
        this.$store.commit("changeSearch", false);
      }
    },
    watch: {
      page: function (val) {
        if (this.searchText === "") {
          if (val === this.pageNum) {
            this.showCities = [];
            let tmp = (val - 1) * 300;
            for (let i = tmp; i < tmp + 234; i++) {
              this.showCities.push(cities[i]);
            }
          } else {
            this.showCities = [];
            let tmp = (val - 1) * 300;
            for (let i = tmp; i < tmp + 300; i++) {
              this.showCities.push(cities[i]);
            }
          }
        } else {
          if (val === this.pageNum) {
            this.showCities = [];
            let tmp = (val - 1) * 300;
            for (let i = tmp; i < tmp + (this.searchRes.length % 300); i++) {
              this.showCities.push(this.searchRes[i]);
            }
          } else {
            this.showCities = [];
            let tmp = (val - 1) * 300;
            for (let i = tmp; i < tmp + 300; i++) {
              this.showCities.push(this.searchRes[i]);
            }
          }
        }
      },
      searchText: function (val) {
        if (val === "") {
          this.showCities = this.tmp;
          return;
        }
        this.showCities = [];
        this.searchRes = [];
        for (let i = 0, len = cities.length; i < len; i++) {
          var city = cities[i];
          if (city.name.indexOf(val) > -1) {
            this.searchRes.push(city);
          }
        }
        if (this.searchRes.length === 0) {
          this.searchRes = [
            {
              id: 19960629,
              name: "还没有找到您要查找的城市",
              cityID: 19960529
            }
          ];
          this.showCities.push(this.searchRes[0]);
          return;
        }
        for (let i = 0; i < this.searchRes.length; i++) {
          this.showCities.push(this.searchRes[i]);
        }
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.$refs.inputCity.focus()
      });
      for (let i = 0; i < 300; i++) {
        this.showCities.push(cities[i]);
      }
      this.tmp = this.showCities;
    },
    computed: {
      pageNum: function () {
        if (this.searchText !== "") {
          return Math.ceil(this.searchRes.length / 300);
        }
        return Math.ceil(cities.length / 300);
      }
    }
  };
</script>

<style scoped>
</style>
